<style>
  .ivu-btn-primary {
    /* 违规上报按钮 */
    color: #fff !important;
    background-color: #d44f60;
    border-color: #d44f60 !important;
  }

  .ivu-btn {
    /* 此页面所有按钮 */
    color: #6b68ed;
    border: 2px solid #ffe887;
  }

  .ivu-input {
    /* 输入框 */
    border: 2px solid #ffe887;
  }

  .ivu-input-search i {
    /* 搜索框的i图标 */
    color: #ffe887;
  }

  .ivu-table th {
    background-color: rgba(174, 232, 254, 0.3);
  }

  .ivu-modal {
    margin-bottom: 150px;
  }
</style>

<link rel="stylesheet" href="css/getOutOfLine.css" />
<div
  id="up"
  style="
    background: #fff;
    padding-left: 30px;
    padding-right: 30px;
    margin-bottom: 140px;
  "
>
  <!-- 上报start -->
  <Modal v-model="modal1" title="违规人员信息上报" :width="920">
    <div style="overflow: hidden">
      <!-- 违规人员信息上传 start -->
      <i-form
        ref="reportInfo"
        :model="reportInfo"
        :rules="ruleValidate"
        :label-width="105"
        label-position="left"
      >
        <div style="width: 400px; float: left; margin: 0 50px 0 20px">
          <form-item label="姓名" prop="name">
            <i-input
              v-model="reportInfo.name"
              placeholder="请输入姓名"
            ></i-input>
          </form-item>

          <form-item label="人员类型" prop="person_type">
            <i-select
              v-model="reportInfo.person_type"
              placeholder="请选择人员类型"
            >
              <i-option value="教工">教工</i-option>
              <i-option value="学生">学生</i-option>
              <i-option value="合同工">合同工</i-option>
            </i-select>
          </form-item>

          <form-item label="证件类型" prop="certificate_type">
            <i-select
              v-model="reportInfo.certificate_type"
              placeholder="请选择证件类型类型"
            >
              <i-option value="工作证号">工作证号</i-option>
              <i-option value="学号">学号</i-option>
              <i-option value="身份证号">身份证号</i-option>
            </i-select>
          </form-item>

          <form-item label="学号(证件号)" prop="certificate_id">
            <i-input
              v-model="reportInfo.certificate_id"
              placeholder="请输入学号(证件号)"
            ></i-input>
          </form-item>

          <!-- <form-item label="违规行为" prop="behavior">
                        <i-select v-model="reportInfo.behavior" placeholder="请填写违规原因"> -->
          <!-- 在VUE中运维 -->

          <!-- <i-option v-for="item in behaviors" :value="item">{{item}}</i-option> -->

          <!-- <i-option value="无骑行证驾驶">无骑行证驾驶</i-option>
                            <i-option value="转让骑行证">转让骑行证</i-option>
                            <i-option value="伪造骑行证">伪造骑行证</i-option>
                            <i-option value="售卖骑行证">售卖骑行证</i-option>
                            <i-option value="拆卸骑行证">拆卸骑行证</i-option>
                            <i-option value="借予他人使用">借予他人使用</i-option>
                            <i-option value="故意损坏、涂鸦通行证">故意损坏、涂鸦通行证</i-option>
                            <i-option value="行驶速度过快">行驶速度过快</i-option>
                            <i-option value="未佩戴安全头盔">未佩戴安全头盔</i-option>
                            <i-option value="未在规定区域停放">未在规定区域停放</i-option>
                            <i-option value="未在规定区域内充电">未在规定区域内充电</i-option> -->
          <!-- </i-select>
                    </form-item> -->

          <!-- 违规行为start -->
          <form-item label="违规行为" prop="behavior">
            <checkbox-group v-model="reportInfo.behavior">
              <Checkbox
                v-for="(item, index) in behaviors"
                :label="item"
                :value="item"
                :key="index"
              >
                {{item}}</Checkbox
              >
              <!-- <Checkbox label="无骑行证驾驶"></Checkbox>
                            <Checkbox label="转让骑行证"></Checkbox>
                            <Checkbox label="伪造骑行证"></Checkbox>
                            <Checkbox label="售卖骑行证"></Checkbox>
                            <Checkbox label="拆卸骑行证"></Checkbox>
                            <Checkbox label="借予他人使用"></Checkbox>
                            <Checkbox label="故意损坏、涂鸦通行证"></Checkbox>
                            <Checkbox label="行驶速度过快"></Checkbox>
                            <Checkbox label="未佩戴安全头盔"></Checkbox>
                            <Checkbox label="未在规定区域停放"></Checkbox>
                            <Checkbox label="未在规定区域内充电"></Checkbox> -->
            </checkbox-group>
          </form-item>
          <!-- 违规行为start -->

          <form-item label="手机号" prop="phone">
            <i-input
              v-model="reportInfo.phone"
              placeholder="请输入手机号"
              :maxlength="11"
              :show-word-limit="true"
            >
            </i-input>
          </form-item>
        </div>

        <div style="width: 400px; height: 500px; float: left">
          <form-item label="骑行证类型" prop="passport_type">
            <i-select
              v-model="reportInfo.passport_type"
              placeholder="请选择骑行证类型"
            >
              <!-- 在VUE中运维 -->
              <i-option v-for="item in passport_type" :value="item"
                >{{item}}</i-option
              >
              <!-- <i-option value="正式">正式</i-option>
                            <i-option value="临时">临时</i-option>
                            <i-option value="无">无</i-option> -->
            </i-select>
          </form-item>

          <form-item label="骑行证号" prop="passport_id">
            <i-input
              v-model="reportInfo.passport_id"
              placeholder="请输入骑行证号"
            ></i-input>
          </form-item>

          <form-item label="校区" prop="campus">
            <i-select v-model="reportInfo.campus" placeholder="请选择校区">
              <i-option value="中校区">中校区</i-option>
              <i-option value="北校区">北校区</i-option>
              <i-option value="东校区">东校区</i-option>
              <i-option value="西校区">西校区</i-option>
              <i-option value="南校区">南校区</i-option>
            </i-select>
          </form-item>

          <form-item label="违规时间" prop="irregularities_time">
            <Row>
              <i-col span="20">
                <form-item>
                  <date-picker
                    ref="datePicker"
                    type="datetime"
                    @on-change="getDateTime"
                  >
                  </date-picker>
                </form-item>
              </i-col>
            </Row>
          </form-item>

          <form-item label="违规登记员" prop="registrar">
            <i-select v-model="reportInfo.registrar" placeholder="请选择登记员">
              <i-option v-for="i in allRegistrar" :value="i.username"
                >{{i.username}}</i-option
              >
              <!-- xx in xxx(这里这个是数组名)，即通过变量xx对xxx进行变历。把要获取的信息丢到数组名当中，
                                记得把data里加allRegistrar:[],然后用ajax把接口数据传给allRegistrar -->
              <!-- :xxx="" {{}}实现数据双向绑定 -->
            </i-select>
          </form-item>
        </div>
      </i-form>
      <!-- 违规人员信息上传 end -->
    </div>
    <!-- 上报取消按钮实现start -->
    <div slot="footer">
      <i-button type="primary" @click="report" style="width: 80px">
        上报
      </i-button>
      <!-- 点击上报，引发report函数 -->
      <i-button @click="cancel_report" style="width: 80px"> 取消 </i-button>
    </div>
    <!-- 上报取消按钮实现end -->
  </Modal>
  <!-- 上报end -->

  <!-- 查看信息start -->
  <div style="padding-top: 20px; position: relative">
    <div style="margin-bottom: 20px">
      <i-button type="primary" @click="modal1 = true;">违规上报</i-button>

      <!-- 搜索框 -->
      <div style="width: 300px; float: right">
        <i-input
          search
          enter-button
          placeholder="姓名或证件号搜索"
          v-model="searchkey"
        />
      </div>

      <!-- 刷新 -->
      <div style="float: right; margin-right: 5px">
        <i-button @click="get_info" icon="md-refresh">刷新</i-button>
      </div>
    </div>

    <!-- 加载动效 -->
    <Spin fix v-if="spinShow">
      <div style="height: 110px">
        <img class="loadImg spin-icon-load" src="images/轮.png" />
      </div>
      <p style="color: #999999">请求数据中</p>
    </Spin>

    <!-- (查看)表格start -->
    <i-table
      :columns="information"
      stripe
      :data="showinfo"
      border
      height="500"
    ></i-table>
    <!-- 数据中，:columns绑定的information管理的是列，data中绑定的one_info管理的是行-->
    <!-- (查看)表格end -->
  </div>
  <!-- 查看信息end -->
</div>

<script>
  new Vue({
    el: "#up",
    data: {
      // 请求数据时是否展示spin遮罩
      spinShow: true,

      // 对话框是否显示
      modal1: false,

      allRegistrar: [],

      // 前端的behaviors
      behaviors: [
        "无骑行证驾驶",
        "转让骑行证",
        "伪造骑行证",
        "售卖骑行证",
        "拆卸骑行证",
        "借予他人使用",
        "故意损坏或涂鸦骑行证",
        "行驶速度过快",
        "未佩戴安全头盔",
        "未在规定区域停放",
        "未在规定区域充电",
      ],

      // 前端的passport_type
      passport_type: ["正式", "临时", "无"],

      // 需要上报的data
      reportInfo: {
        name: "",
        person_type: "",
        certificate_type: "",
        certificate_id: "",
        behavior: [],
        phone: "",
        passport_type: "",
        pasport_id: "",
        campus: "",
        registrar: "",
        irregularities_time: "",
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: "blur",
          },
        ],
        person_type: [
          {
            required: true,
            message: "请选择人员类型",
            trigger: "change",
          },
        ],
        certificate_type: [
          {
            required: true,
            message: "请选择证件类型",
            trigger: "",
          },
        ],
        certificate_id: [
          {
            required: true,
            message: "学号不能为空",
            trigger: "blur",
          },
        ],
        // behavior: [{
        //     required: true,
        //     message: '请选择违规类型',
        //     trigger: 'blur'

        // }, ],
        behavior: [
          {
            required: true,
            type: "array",
            min: 1,
            message: "请选择违规行为",
            trigger: "change",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          // 这个是检测输入框有没有输入东西的
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号格式不正确",
            trigger: "blur",
          },
          // 这个是真正检测手机号格式(如号码开头正不正确，位数正不正确，是不是包含了不该有的字符如字母等)的
        ],
        passport_type: [
          {
            required: true,
            message: "请选择骑行证类型",
            trigger: "change",
          },
        ],
        passport_id: [
          {
            required: true,
            message: "请输入骑行证号",
            trigger: "change",
          },
        ],
        campus: [
          {
            required: true,
            message: "请选择校区",
            trigger: "change",
          },
        ],
        registrar: [
          {
            required: true,
            message: "请选择登记员",
            trigger: "change",
          },
        ],
        irregularities_time: [
          {
            required: true,
            type: "datetime", //
            message: "请选择时间",
            trigger: "change",
          },
        ],
      },

      searchkey: "", //搜索框关键字

      // 列关键字信息
      information: [
        {
          title: "姓名",
          key: "name",
          width: 110,
        },
        {
          title: "人员类型",
          key: "person_type",
          width: 95,
        },
        {
          title: "证件号",
          key: "certificate_id",
          width: 150,
        },
        {
          title: "违规行为",
          key: "behavior",
          width: 160,
        },
        {
          title: "手机号",
          key: "phone",
          width: 130,
        },
        {
          title: "骑行证类型",
          key: "passport_type",
          width: 110,
        },
        {
          title: "骑行证号",
          key: "passport_id",
          width: 120,
        },
        {
          title: "校区",
          key: "campus",
          width: 120,
        },
        {
          title: "违规时间",
          key: "irregularities_time",
        },
        {
          title: "违规登记员",
          key: "registrar",
        },
      ],
      // 行具体信息
      info: [],
      showinfo: [],
    },

    methods: {
      /*获取时间*/
      getDateTime: function (time) {
        console.log(time);
        this.reportInfo.irregularities_time = time;
      },

      /* 上报函数 */
      async report() {
        // console.log(typeof this.reportInfo.irregularities_time);
        // console.log(this.reportInfo.irregularities_time);
        //var that是全局变量
        var that = this; //this是返回上一层的意思，这里返回上一层就是返回到vue层
        // var a='我在report里';
        if (this.reportInfo.name == "") {
          // console.log(this.a);
          // console.log(that.a);
          that.$Message.info("请输入姓名！！");
          //函数里(不是if里)不能用this，因为这一层的this是返回的上一层是 report()函数里
        } else if (this.reportInfo.person_type == "") {
          that.$Message.info("请输入人员类型！！");
        } else if (this.reportInfo.certificate_type == "") {
          that.$Message.info("请输入证件类型！！");
        } else if (this.reportInfo.certificate_id == "") {
          that.$Message.info("请输入证件号！！");
        } else if (this.reportInfo.behavior == "") {
          that.$Message.info("请输入违规行为！！");
        } else if (this.reportInfo.phone == "") {
          that.$Message.info("请输入手机号！！");
        } else if (this.reportInfo.passport_type == "") {
          that.$Message.info("请输入骑行证类型！！");
        } else if (this.reportInfo.passport_id == "") {
          that.$Message.info("请输入骑行证号！！");
        } else if (this.reportInfo.campus == "") {
          that.$Message.info("请输入校区！！");
        } else if (this.reportInfo.registrar == "") {
          that.$Message.info("请输入登记员！！");
        } else if (this.reportInfo.irregularities_time == "") {
          that.$Message.info("请输入违规时间！！");
        } else {
          console.log(that.reportInfo.behavior);
          const tmpReportInfo = JSON.parse(JSON.stringify(that.reportInfo));
          const behaviorLength = that.reportInfo.behavior.length;
          let flag;
          let error_msg;
          console.log(tmpReportInfo);
          for (let i = 0; i < behaviorLength; i++) {
            console.log(tmpReportInfo);
            console.log(behaviorLength);
            let p = new Promise(function (resolve, reject) {
              var requestReportInfo = JSON.parse(JSON.stringify(tmpReportInfo));
              var tmpBehavior = JSON.parse(JSON.stringify(tmpReportInfo))
                .behavior[i];

              requestReportInfo.behavior = tmpBehavior;
              console.log(requestReportInfo);
              $.ajax({
                //1请求给后端传输数据的链接（接口(传给后端的)地址）
                url: "http://3v.gsdse.cn/UEBIMP/public/index.php/index/Violations/insert",
                type: "POST",
                //3给后端传送（reportInfo里的）数据
                data: requestReportInfo,
                // 同步请求
                async: false,
                // 2请求成功
                success(res) {
                  //res就是后端文档里返回的东西的类似于对象名的可以用的东东
                  // 4
                  if (res.error_code == 0) {
                    // .success 如果发送数据成功
                    flag = 0;
                    that.modal1 = false;
                  } else if (res.error_code == 1) {
                    // .error 如果发送数据失败
                    flag = 1;
                    console.log(requestReportInfo.behavior + "->上报失败");
                    // that.$Notice.error({
                    //     title: "上报失败"
                    // });
                  } else if (res.error_code == 2) {
                    // .warning 如果发送的数据缺少参数
                    flag = 2;

                    // that.$Notice.warning({
                    //     title: res.msg //
                    // });
                  }
                },
                // 2请求失败
                error(res) {
                  flag = -1;
                  console.log(requestReportInfo.behavior + "->请求失败");
                  // that.$Notice.error({
                  //     title: "请求失败" //
                  // });
                },
              });
            });
            console.log("第" + i + "次循环");
            p.then(function (resolve) {});
          }
          if (flag == 0) {
            that.$Notice.success({
              //封装好的提示框
              title: "上报成功", //提示框里的提示信息
            });
            that.get_info();
          } else {
            that.$Notice.error({
              title: "上报异常",
            });
            console.log(error_msg);
          }
        }
        // 清空datepicker start
        // console.log(this.$refs);
        this.$refs.datePicker.handleClear();
        // 清空datepicker end
        this.$refs["reportInfo"].resetFields();
      },

      /* 获取违规登记员下拉表单信息函数 */
      get_user() {
        var that = this;
        $.ajax({
          type: "POST",
          url: "http://3v.gsdse.cn/UEBIMP/public/index.php/index/User/select_user",
          success(resp) {
            //response
            if (resp.error_code == 0) {
              that.allRegistrar = resp.users; //获取接口数据
            } else if (resp.error_code == 1) {
              that.$Notice.error({
                title: resp.msg,
              });
            }
          },
          error() {
            that.$Notice.error({
              title: "请求数据失败",
            });
          },
        });
      },

      /* 取消上报函数 */
      cancel_report() {
        this.$refs.datePicker.handleClear();
        this.$refs["reportInfo"].resetFields();
        // 注意加参数要有符号' '
        this.modal1 = false;
      },

      /* 获取表格展示信息函数 */
      get_info() {
        var that = this;
        // 数组[]才有splice函数，对象{}没有
        that.info.splice(0, that.info.length); //清空数组
        that.$Loading.start();
        that.spinShow = true;
        $.ajax({
          url: "http://3v.gsdse.cn/UEBIMP/public/index.php/index/Violations/select",
          type: "POST",
          success(res) {
            if (res.error_code == 0) {
              //查询成功
              that.info = res.data; //先获取Web数据库行具体数据
              //初始化
              first = function (callback) {
                var c1 = new cloud.Cloud({
                  //必填，表示是未登录模式
                  identityless: true,
                  //资源方 AppID
                  resourceAppid: "wx9653090528b58f4d",
                  //资源方环境 ID
                  resourceEnv: "cloud1-4gwqwv78b04dcc86",
                });
                c1.init();
                //回调
                callback(c1);
              };
              //回调使用完成初始化后，即可访问云数据库
              callback = function (c1) {
                const db = c1.database();
                db.collection("violations")
                  .where({
                    // 突破限制
                    _id: {},
                  })
                  .get({
                    success: (wxres) => {
                      console.log(wxres.data);
                      that.info = that.info.concat(wxres.data);
                    },
                    fail: (wxres) => {
                      console.log(wxres);
                    },
                  });
              };
              first(callback);
            } else if (res.error_code == 1) {
              //查询无结果
              that.$Notice.error({
                title: res.msg,
              });
            }
          },
          error(res) {
            that.$Notice.error({
              title: "请求数据失败",
            });
          },
          // complete()是自带的函数，无论ajax请求成功还是失败，都会调用complete()函数
          complete() {
            that.$Loading.finish(); //结束loading
            that.spinShow = false; //关闭遮罩层
          },
        });
      },
    },

    watch: {
      info: {
        //监听info刷新是否变化
        immediate: true, //immediate: true,使页面一加载该函数就出来
        handler(newValue, oldValue) {
          this.showinfo = newValue; //showinfo过滤信息，达到“搜索效果”
        },
      },
      searchkey: {
        immediate: true,
        handler(newValue, oldValue) {
          this.showinfo = this.info.filter((p) => {
            return (
              p.name.indexOf(newValue) !== -1 ||
              p.certificate_id.indexOf(newValue) !== -1
            );
            // indexOf() 返回作为参数传递的当前字符串中字符串首次出现的位置
            //  如果找不到该字符串，则返回-1。
          });
        },
      },
    },

    // mounted 首次渲染，就加载
    mounted: function () {
      this.get_info(); //获取表格要展示数据的函数
      this.get_user(); //获取下拉表单违规登记员名单的函数
    },
  });
</script>
